<template>
  <div>
    <navs title="成为双千基地" fixed></navs>
    <van-form @submit="onSubmit" style="margin-top: 46px">
      <van-cell-group>
        <van-field
          v-model="form.name"
          name="name"
          label="基地名称"
          placeholder="请输入基地名称"
          :rules="[{ required: true, message: '请输入基地名称' }]"
        />
        <van-field
          v-model="form.application_unit"
          name="application_unit"
          label="申请单位"
          placeholder="请输入申请单位"
          :rules="[{ required: true, message: '请输入申请单位' }]"
        />
        <van-field
          v-model="form.manage_unit"
          name="manage_unit"
          label="主管单位"
        />
        <van-field
          v-model="form.principal"
          name="principal"
          label="负责人"
          placeholder="请输入负责人"
          :rules="[{ required: true, message: '请输入负责人' }]"
        />
        <van-field
          v-model="form.principal_phone"
          name="principal_phone"
          type="tel"
          maxlength="11"
          label="负责人手机号"
          placeholder="请输入负责人手机号"
          :rules="[{ required: true, message: '请输入负责人手机号' }]"
        />
        <van-field
          v-model="form.contact_person"
          name="contact_person"
          label="联系人"
          placeholder="请输入联系人"
          :rules="[{ required: true, message: '请输入联系人' }]"
        />
        <van-field
          v-model="form.contact_phone"
          name="contact_phone"
          type="tel"
          maxlength="11"
          label="联系人手机号"
          placeholder="请输入联系人手机号"
          :rules="[{ required: true, message: '请输入联系人手机号' }]"
        />
        <van-field v-model="form.url" name="url" label="官网地址" />
        <van-field
          v-model="form.typeText"
          label="类别"
          readonly
          is-link
          name="picker"
          placeholder="请选择基地类别"
          @click="typePicker = true"
          :rules="[{ required: true, message: '请选择基地类别' }]"
        />
        <van-popup v-model:show="typePicker" position="bottom">
          <van-picker
            :columns="form.baseTypeList"
            @confirm="typePickerConfirm"
            @cancel="typePicker = false"
          />
        </van-popup>
        <van-field
          v-model="form.address"
          name="address"
          label="地址"
          placeholder="请输入地址"
          :rules="[{ required: true, message: '请输入地址' }]"
        />
        <van-field
          v-model.number="form.total_area"
          name="total_area"
          type="number"
          label="场地总面积"
          placeholder="请输入场地总面积"
          :rules="[{ required: true, message: '请输入场地总面积' }]"
        >
          <template #extra> 平方 </template>
        </van-field>
        <van-field
          v-model.number="form.open_area"
          name="open_area"
          type="number"
          label="可开放面积"
          placeholder="请输入可开放面积"
          :rules="[{ required: true, message: '请输入可开放面积' }]"
        >
          <template #extra> 平方 </template>
        </van-field>
        <van-field
          v-model.number="form.work_number"
          name="work_number"
          type="digit"
          label="在职人员数"
          placeholder="请输入在职人员数"
          :rules="[{ required: true, message: '请输入在职人员数' }]"
        />
        <van-field
          v-model.number="form.pluralism_number"
          name="pluralism_number"
          type="digit"
          label="兼职人员数"
          placeholder="请输入兼职人员数"
          :rules="[{ required: true, message: '请输入兼职人员数' }]"
        />
        <van-field
          v-model.number="form.guide_number"
          name="guide_number"
          type="digit"
          label="讲解员人员数"
          placeholder="请输入讲解员人员数"
          :rules="[{ required: true, message: '请输入讲解员人员数' }]"
        />
        <van-field
          v-model.number="form.tmp_volunteer_number"
          name="tmp_volunteer_number"
          type="digit"
          label="临时志愿者数"
          placeholder="请输入临时志愿者人数"
          :rules="[{ required: true, message: '请输入临时志愿者人数' }]"
        />
        <van-field name="funding_type" label="经济来源">
          <template #input>
            <van-radio-group
              v-model="form.funding_type"
              direction="horizontal"
              checked-color="#2D65AC"
            >
              <van-radio name="1">政府</van-radio>
              <van-radio name="2">其他</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model.number="form.funding_number"
          name="funding_number"
          type="number"
          label="经费金额"
          placeholder="请输入经费金额"
          :rules="[{ required: true, message: '请输入经费金额' }]"
        />
        <van-field name="is_free" label="是否免费开放">
          <template #input>
            <van-radio-group
              v-model="form.is_free"
              direction="horizontal"
              checked-color="#2D65AC"
            >
              <van-radio :name="1">是</van-radio>
              <van-radio :name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          name="checkboxGroup"
          label="每周开馆时间"
          :rules="[{ required: true, message: '请选择每周开馆时间' }]"
        >
          <template #input>
            <van-checkbox-group
              v-model="form.open_date"
              direction="horizontal"
              checked-color="#2D65AC"
            >
              <van-checkbox
                class="mb8"
                :name="`${index}`"
                shape="square"
                v-for="(item, index) in weekDay"
                :key="index"
                >{{ item }}</van-checkbox
              >
            </van-checkbox-group>
          </template>
        </van-field>
        <van-field
          v-model="form.open_time_morning"
          is-link
          readonly
          name="datetimePicker"
          label="每日开馆时间"
          placeholder="请选择上午开馆时间"
          @click="amPicker = true"
          :rules="[{ required: true, message: '请选择上午开馆时间' }]"
        />
        <dateLimit
          v-model="amPicker"
          @onConfirm="
            (value) => {
              form.open_time_morning = value
            }
          "
        ></dateLimit>
        <van-field
          v-model="form.open_time_afternoon"
          is-link
          readonly
          name="datetimePicker"
          label="  "
          placeholder="请选择下午开馆时间"
          @click="pmPicker = true"
          :rules="[{ required: true, message: '请选择下午开馆时间' }]"
        />
        <dateLimit
          v-model="pmPicker"
          @onConfirm="
            (value) => {
              form.open_time_afternoon = value
            }
          "
        ></dateLimit>
        <van-field
          name="stepper"
          label="可预约人数"
          :rules="[{ required: true, message: '请输入可预约人数' }]"
        >
          <template #input>
            <van-stepper v-model.number="form.reserve_number" />
            <label class="color99 ft24 flex1">（每个时间段可预约人数）</label>
          </template>
        </van-field>
        <van-field
          name="coverList"
          label="基地封面图"
          :rules="[{ required: true, message: '未上传基地封面图' }]"
        >
          <template #input>
            <van-uploader
              v-model="form.coverList"
              :after-read="uploadCover"
              accept="image/png,image/jpeg,image/jpg"
            />
          </template>
        </van-field>
        <van-field
          v-model="form.intro"
          rows="2"
          autosize
          label="基地简介"
          type="textarea"
          maxlength="200"
          placeholder="请输入基地的基本情况"
          show-word-limit
          :rules="[{ required: true, message: '请输入基地简介' }]"
        />
        <div class="p12 ft28 van-cell__value--alone">
          与中小学校或教育机构合作情况(选填）<label class="color99"
            >如有请简要说明</label
          >
        </div>
        <div class="u-f">
          <div style="width: 25%"></div>
          <div class="flex1">
            <van-radio-group
              class="pl16"
              v-model="form.institutionFlag"
              direction="horizontal"
              checked-color="#2D65AC"
            >
              <van-radio :name="1" class="ft28">有</van-radio>
              <van-radio :name="0" class="ft28">无</van-radio>
            </van-radio-group>
            <van-field
              v-show="form.institutionFlag"
              v-model="form.institution_cooperate"
              rows="2"
              autosize
              type="textarea"
              maxlength="200"
              placeholder="请输入说明"
              show-word-limit
            />
          </div>
        </div>
        <div class="p12 ft28">
          <van-checkbox
            v-model="form.checked"
            checked-color="#2D65AC"
            label-disabled
            >阅读并同意 <a @click="showProtocol = true">《XXXXXX注册协议》</a>
          </van-checkbox>
          <agreeProtocol
            v-model="showProtocol"
            src="/register_protocol.html"
            @back="back"
            @agree="agree"
          ></agreeProtocol>
        </div>

        <div class="p20">
          <van-button
            round
            block
            color="#2D65AC"
            native-type="submit"
            :disabled="!form.checked"
          >
            提交
          </van-button>
        </div>
      </van-cell-group>
    </van-form>
  </div>
  <success :isShow="isSuccess">
    <p>您的基地申请已经提交成功，审核进度可在个人中心查看。</p>
  </success>
</template>

<script setup>
import success from '@/components/success.vue'
import agreeProtocol from '@/components/protocol/agreeProtocol.vue'
import dateLimit from '@/components/date-limit.vue'
import { reactive, ref, getCurrentInstance, onBeforeMount } from 'vue'
import { weekDay } from '@/utils/model'
import { uploadFile } from '@/utils/upload.js'
const form = reactive({
  deleted_at: null,
  name: '',
  application_unit: '测试',
  manage_unit: '测试',
  principal: '1',
  principal_phone: '13695875851',
  contact_person: '1',
  contact_phone: '13695875851',
  url: '1',
  type: '',
  typeText: '',
  total_area: 1,
  open_area: 1,
  work_number: 1,
  pluralism_number: 1,
  guide_number: 1,
  tmp_volunteer_number: 1,
  funding_type: '1',
  funding_number: 1,
  is_free: 1,
  reserve_number: 1,
  intro: '1',
  institution_cooperate: '',
  address: '2',
  cover: '',
  coverList: [],
  baseTypeList: [],
  checked: true,
  open_date: [],
  open_time_morning: '',
  open_time_afternoon: '',
  institutionFlag: 0
})
const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties

const isSuccess = ref(false) //是否提交成功
const showProtocol = ref(false) //显示协议
const typePicker = ref(false) //显示类别选择框
const amPicker = ref(false) //显示上午选择时间框
const pmPicker = ref(false) //显示下午选择时间框
const onClickLeft = () => history.back() //顶部导航点击返回事件
onBeforeMount(async () => {
  // 获取基地类型列表
  _this.$api.base.GetBaseType().then((res) => {
    for (const key in res.data) {
      form.baseTypeList.push({ index: key, text: res.data[key] })
    }
  })
})
const typePickerConfirm = (value) => {
  //类别选择框点击确认事件
  console.log(value)
  form.type = value.index
  form.typeText = value.text
  typePicker.value = false
}
// 协议退出
const back = () => {
  form.checked = false
}
// 同意协议
const agree = () => {
  form.checked = true
}
const uploadCover = (info) => {
  uploadFile(info)
    .then((res) => {
      form.cover = res.data.file_name
      form.coverList[0].url = _this.$oss + res.data.file_name
    })
    .catch(() => {
      form.coverList[0].status = 'error'
    })
}
//form提交事件
const onSubmit = (obj) => {
  console.log(form)
  _this.$api.base
    .AddBaseInfo(form)
    .then((res) => {
      isSuccess.value = true
    })
    .catch((err) => console.log(err))
}
</script>

<style scoped lang="scss"></style>
